import React from 'react'
import ReactDOM from 'react-dom'

//第一种创建组件的方式
function Hello(props){
    //如果在一个组件中return null,则表示此组件是空的，什么都不会渲染
    //return null


    //在组件中，必须返回一个合法的JSX虚拟DOM元素

    // console.log(props)
    // props.obj.name="12344" //可以修改
    // props.name="12344"  //不可修改
    // return <h1>使用构造函数的方式创建组件---我叫{props.obj.name}-我爱{props.obj.love}</h1>
    return <h1>使用构造函数的方式创建组件---我叫{props.name}-{props.gender}-我爱{props.love}---{props.age}</h1>
}

const dog = {
    name:"秋宝",
    gender:'雌',
    love:'逛街'
}
const dog1={
    age:3,
    ...dog
}


ReactDOM.render(
    <div>
        {/* <Hello obj={dog}></Hello>  组件传参 */}
        {/* <Hello name={dog.name} love={dog.love}></Hello>*/}
        <Hello {...dog1}></Hello>  {/* 使用展开运算符 */}
        
    </div>,document.getElementById('app'))